// 引入gulp
// const gulp = require('gulp')
const { src, dest, parallel, series } = require('gulp')
// const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename =require('gulp-rename')
const autoprefixer =require('gulp-autoprefixer')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const del = require('del')
const browserSync = require('browser-sync')
const bs = browserSync.create()

// 声明 gulp 任务
const style = () => {
    // 流 就是异步操作,不用写回调函数
    // return gulp.src('src/css/index.css',{ base: 'src'}).pipe(gulp.dest('dist'))
    return src('src/css/index.css',{ base: 'src'})
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(rename({"extname":".min.css"}))
    .pipe(dest('dist'))
}

// 声明脚本构建任务
const script = () => {
    return src('src/js/*.js',{ base: 'src'})
    .pipe(babel({
        presets:['babel-preset-env']
    }))
    .pipe(uglify())
    .pipe(rename({"extname":".min.js"}))
    .pipe(dest('dist'))
}

// 声明页面 HTML 构建任务
const html = () => {
    return src('src/index.html')
    .pipe(htmlmin({ 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
    }))
    .pipe(dest('dist'))
}

// 声明 文件清除 任务
const clean = () => {
    return del(['dist'])
}
// 声明 服务发布任务
const serve = () => {
    // 初始化服务
    bs.init({
        notify:false,   // 禁用 浏览器 右上角的 browserSync connected 提示框
        server: { 
            baseDir: './dist' // 指定服务启动的目录
        }
    })
}
// 组合任务
const build = parallel(style,script,html)
const dev = series(clean,build,serve)
// 导出任务
module.exports = {
    dev
}